{% extends '_layout.html' %} {% block _head %} {% load static %}
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
{% endblock %}

{% block main %}
<style>
    .corr{
        width: 100%; height:70%;margin-top: 15%;margin-bottom: 5%
    }
</style>

<div class='corr'>
    <div id="org_corr" style="width: 100%; height: 100%;"> </div>
</div>

<div style="height:100%;margin-top: 5%; margin-bottom: 45%">
  {% for name,type,value in static_col %}
  <div id="{{ name }}" style="width: 40%; height: 40%; float: left"></div>
  {% endfor %}
</div>

<div  class='corr'>
<div id="new_corr" style="width: 100%; height: 100%;">> </div>
</div>
{% endblock %} 
{% block script %}
<script>
  {% for name,type,value in static_col %}
      var chartDom = document.getElementById('{{name}}');
      var myChartLoan_Status = echarts.init(chartDom);
      myChartLoan_Status.setOption({
        title: {text: '{{name}}'},
        xAxis: {type: 'category',data: {{type|safe}}, },
        yAxis: {type: 'value'},
        series: [
            {
                data: {{value}},
                type: 'bar',
                showBackground: true,
                label: {
                  show: true,
                  position: 'inside'
                },
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
             },
            ]
        });
  {% endfor %}

  
function corr(id,title,name,data){
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option = {
        title: {text: title},
      tooltip: {
        position: 'top'
      },
      grid:{
        left:"10%",// 调整这个属性
        bottom:"18%",
      },
      xAxis: {
        type: 'category',
        data: name,
        splitArea: {
          show: true
        },
        axisLabel: {
            color: '#333',
            //  让x轴文字方向为竖向
			interval: 0,
            fontSize:9,
            rotate:-30 
          }
      },
      yAxis: {
        type: 'category',
        data: name,
        splitArea: {
          show: true
        },
        axisLabel: {
            color: '#333',
            //  让x轴文字方向为竖向
			interval: 0,
            fontSize:9,
          }
      },
      visualMap: {
        min: 0,
        max: 1,
        precision:3,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '0%'
      },
      series: [
        {
          name: 'corrate value',
          type: 'heatmap',
          data: data,
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);   
}
let a = {{new_corr.0|safe}}
corr('org_corr',"原始数据热图",{{org_corr.0|safe}},{{org_corr.1|safe}})
corr('new_corr',"数据处理后数据热图",{{new_corr.0|safe}},{{new_corr.1|safe}}) 

</script>
{% endblock %}
